import * as api from './api';
import { getBaseURL } from '/@/utils/baseUrl';
import { getBase64 } from '/@/utils/tools';
import {
    dict,
    UserPageQuery,
    AddReq,
    DelReq,
    EditReq,
    compute,
    CreateCrudOptionsProps,
    CreateCrudOptionsRet
} from '@fast-crud/fast-crud';
import { request } from '/@/utils/service';
import { dictionary } from '/@/utils/dictionary';
import { successMessage } from '/@/utils/message';
import { auth } from '/@/utils/authFunction';
import { SystemConfigStore } from "/@/stores/systemConfig";
import { storeToRefs } from "pinia";
import { computed } from "vue";
import { Md5 } from 'ts-md5';
import { commonCrudConfig } from "/@/utils/commonCrud";
import { ElMessageBox } from 'element-plus';
import { t } from '@wangeditor/editor';
export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
    const pageRequest = async (query: UserPageQuery) => {
        return await api.GetList(query);
    };
    const editRequest = async ({ form, row }: EditReq) => {
        form.id = row.id;
        return await api.UpdateObj(form);
    };
    const delRequest = async ({ row }: DelReq) => {
        return await api.DelObj(row.id);
    };
    const addRequest = async ({ form }: AddReq) => {

        console.log(form, '1111');
        // 打印最终提交的数据
        let img = 'http://localhost:8000/' + form.face_furtear
        const response = await fetch(img);
        console.log(response, 'response');

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const blob = await response.blob(); // 获取图片的二进制数据
        const reader = new FileReader();
        reader.onloadend = () => {
            reader.result; // 这里是转换后的 Base64 数据
            form.face_feature = reader.result; // 修改拷贝后的对象
            return api.AddObjUser(form); // 提交拷贝后的对象
        };
        reader.readAsDataURL(blob); // 使用 FileReader 转换为 Base64

    };

    const exportRequest = async (query: UserPageQuery) => {
        return await api.exportData(query)
    }

    const resetToDefaultPasswordRequest = async (row: EditReq) => {
        await api.resetToDefaultPassword(row.id)
        successMessage("重置密码成功")
    }

    const systemConfigStore = SystemConfigStore()
    const { systemConfig } = storeToRefs(systemConfigStore)
    const getSystemConfig = computed(() => {
        // console.log(systemConfig.value)
        return systemConfig.value
    })


    return {
        crudOptions: {
            table: {
                remove: {
                    confirmMessage: '是否删除该用户？',
                },
            },
            request: {
                pageRequest,
                addRequest,
                editRequest,
                delRequest,
            },
            form: {
                initialForm: {
                    password: computed(() => {
                        return systemConfig.value['base.default_password']
                    }),
                }
            },
            actionbar: {
                buttons: {
                    add: {
                        show: auth('user:Create')
                    },
                    export: {
                        text: "导出",//按钮文字
                        title: "导出",//鼠标停留显示的信息
                        show: auth('user:Export'),
                        click: (ctx: any) => ElMessageBox.confirm(
                            '确定重设密码吗？', '提示',
                            { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
                        ).then(() => resetToDefaultPasswordRequest(ctx.row))
                    }
                }
            },
            rowHandle: {
                //固定右侧
                fixed: 'right',
                width: 200,
                buttons: {
                    view: {
                        show: false,
                    },
                    edit: {
                        iconRight: 'Edit',
                        type: 'text',
                        show: auth('user:Update'),
                    },
                    remove: {
                        iconRight: 'Delete',
                        type: 'text',
                        show: auth('user:Delete'),
                    },
                    custom: {
                        text: '重设密码',
                        type: 'text',
                        show: auth('user:ResetPassword'),
                        tooltip: {
                            placement: 'top',
                            content: '重设密码',
                        },
                        //@ts-ignore
                        click: (ctx: any) => {
                            const { row } = ctx;
                            resetToDefaultPasswordRequest(row)
                        },
                    },
                },
            },
            columns: {
                _index: {
                    title: '序号',
                    form: { show: false },
                    column: {
                        type: 'index',
                        align: 'center',
                        width: '70px',
                        columnSetDisabled: true, //禁止在列设置中选择
                    },
                },
                username: {
                    title: '账号',
                    search: {
                        show: true,
                    },
                    type: 'input',
                    column: {
                        minWidth: 100, //最小列宽
                    },
                    form: {
                        rules: [
                            // 表单校验规则
                            {
                                required: true,
                                message: '账号必填项',
                            },
                        ],
                        component: {
                            placeholder: '请输入账号',
                        },
                    },
                },
                password: {
                    title: '密码',
                    type: 'password',
                    column: {
                        show: false,
                    },
                    editForm: {
                        show: false,
                    },
                    form: {
                        rules: [
                            // 表单校验规则
                            {
                                required: true,
                                message: '密码必填项',
                            },
                        ],
                        component: {

                            span: 12,
                            showPassword: true,
                            placeholder: '请输入密码',
                        },
                    },
                    valueResolve({ form }) {
                        if (form.password) {
                            form.password = Md5.hashStr(form.password)
                        }
                    }
                },
                name: {
                    title: '姓名',
                    search: {
                        show: true,
                    },
                    type: 'input',
                    column: {
                        minWidth: 100, //最小列宽
                    },
                    form: {
                        rules: [
                            // 表单校验规则
                            {
                                required: true,
                                message: '姓名必填项',
                            },
                        ],
                        component: {
                            span: 12,
                            placeholder: '请输入姓名',
                        },
                    },
                },
                dept: {
                    title: '部门',
                    search: {
                        disabled: true,
                    },
                    type: 'dict-tree',
                    dict: dict({
                        isTree: true,
                        url: '/api/system/dept/all_dept/',
                        value: 'id',
                        label: 'name'
                    }),
                    column: {
                        minWidth: 200, //最小列宽
                        formatter({ value, row, index }) {
                            return row.dept_name_all
                        }
                    },
                    form: {
                        rules: [
                            // 表单校验规则
                            {
                                required: true,
                                message: '必填项',
                            },
                        ],
                        component: {
                            filterable: true,
                            placeholder: '请选择',
                            props: {
                                checkStrictly: true,
                                props: {
                                    value: 'id',
                                    label: 'name',
                                },
                            },
                        },
                    },
                },
                role: {
                    title: '角色',
                    search: {
                        disabled: true,
                    },
                    type: 'dict-select',
                    dict: dict({
                        url: '/api/system/role/',
                        value: 'id',
                        label: 'name',
                    }),
                    column: {
                        minWidth: 200, //最小列宽
                        // formatter({ value, row, index }) {
                        //     const values = row.role_info.map((item: any) => item.name);
                        //     return values.join(',')
                        // }
                    },
                    form: {
                        rules: [
                            // 表单校验规则
                            {
                                required: true,
                                message: '必填项',
                            },
                        ],
                        component: {
                            multiple: true,
                            filterable: true,
                            placeholder: '请选择角色',
                        },
                    },
                },
                mobile: {
                    title: '手机号码',
                    search: {
                        show: true,
                    },
                    type: 'input',
                    column: {
                        minWidth: 120, //最小列宽
                    },
                    form: {
                        rules: [
                            {
                                max: 20,
                                message: '请输入正确的手机号码',
                                trigger: 'blur',
                            },
                            {
                                pattern: /^1[3-9]\d{9}$/,
                                message: '请输入正确的手机号码',
                            },
                        ],
                        component: {
                            placeholder: '请输入手机号码',
                        },
                    },
                },
                email: {
                    title: '邮箱',
                    column: {
                        width: 260,
                    },
                    form: {
                        rules: [
                            {
                                type: 'email',
                                message: '请输入正确的邮箱地址',
                                trigger: ['blur', 'change'],
                            },
                        ],
                        component: {
                            placeholder: '请输入邮箱',
                        },
                    },
                },
                gender: {
                    title: '性别',
                    type: 'dict-select',
                    dict: dict({
                        data: dictionary('gender'),
                    }),
                    form: {
                        value: 1,
                        component: {
                            span: 12,
                        },
                    },
                    component: { props: { color: 'auto' } }, // 自动染色
                },
                user_type: {
                    title: '用户类型',
                    search: {
                        show: true,
                    },
                    type: 'dict-select',
                    dict: dict({
                        data: dictionary('user_type'),
                    }),
                    column: {
                        minWidth: 100, //最小列宽
                    },
                    form: {
                        show: false,
                        value: 0,
                        component: {
                            span: 12,
                        },
                    },
                },
                is_active: {
                    title: '状态',
                    search: {
                        show: true,
                    },
                    type: 'dict-radio',
                    column: {
                        component: {
                            name: 'fs-dict-switch',
                            activeText: '',
                            inactiveText: '',
                            style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
                            onChange: compute((context) => {
                                return () => {
                                    api.UpdateObj(context.row).then((res: APIResponseData) => {
                                        successMessage(res.msg as string);
                                    });
                                };
                            }),
                        },
                    },
                    dict: dict({
                        data: dictionary('button_status_bool'),
                    }),
                },
                avatar: {
                    title: '头像',
                    type: 'avatar-uploader',
                    align: 'center',
                    form: {
                        show: false,
                    },
                    column: {
                        minWidth: 100, //最小列宽
                    },
                },
                ...commonCrudConfig({
                    dept_belong_id: {
                        form: true,
                        table: true
                    }
                }),
                face_furtear: {
                    title: '人脸特征',
                    type: 'image-uploader',
                    align: 'center',
                    form: {
                        show: true,
                    },
                    column: {
                        minWidth: 100,
                    },
                    component: {
                        maxSize: 2 * 1024 * 1024,
                        maxCount: 1,
                        accept: 'image/*',
                        limitType: ['jpg', 'jpeg', 'png'],
                        limitTypeText: '仅支持jpg、jpeg、png格式',
                        limitSizeText: '图片大小不能超过2MB',
                        // 添加上传成功回调
                        onSuccess: (response: any, file: any) => {
                            console.log('【上传成功】服务器响应:', response);
                            console.log('【上传成功】文件信息:', {
                                name: file.name,
                                size: file.size,
                                type: file.type,
                                responseData: response.data  // 假设接口返回数据在data字段
                            });
                            // 如果需要立即更新表单值可以在这里处理
                            file.url = response.data.url; // 假设返回的url路径
                        },
                        // 如果需要显示已上传的图片
                        showFileList: true
                    },
                    async valueResolve({ form }) {
                        if (form.face_feature && form.face_feature.length > 0) {
                            //     // 打印最终提交的数据
                            //     let img = 'http://localhost:8000/' + form.face_furtear[0]
                            //     const response = await fetch(img);

                            //     if (!response.ok) {
                            //       throw new Error(`HTTP error! status: ${response.status}`);
                            //     }
                            //     const blob = await response.blob(); // 获取图片的二进制数据
                            //     const reader = new FileReader();
                            //     reader.onloadend = () => {

                            //         form.face_furtear = reader.result; // 这里是转换后的 Base64 数据
                            //     };
                            //     reader.readAsDataURL(blob); // 使用 FileReader 转换为 Base64
                            // 这里根据你的接口要求处理数据
                            form.face_furtear = form.face_furtear[0];
                        }
                    }
                }
                //人脸特征
                // face_furtear: {
                //     title: '人脸特征',
                //     type: 'image-uploader',
                //     align: 'center',
                //     form: {
                //         show: true,
                //     },
                //     column: {
                //         minWidth: 100, //最小列宽
                //     },
                //     component: {
                //         maxSize: 2 * 1024 * 1024,
                //         maxCount: 1,
                //         accept: 'image/*',
                //         limitType: ['jpg', 'jpeg', 'png'],
                //         limitTypeText: '仅支持jpg、jpeg、png格式',
                //         limitSizeText: '图片大小不能超过2MB',

                //     },
                //     onChange(fileList: any) {
                //         console.log('【onChange】文件列表:', fileList);
                //         console.log('【原始文件对象】:', fileList?.[0]?.raw); // 原始 File 对象
                //     },
                //     beforeUpload(file: File) {
                //         console.log('【beforeUpload】准备上传文件:', {
                //             name: file.name,
                //             size: (file.size / 1024).toFixed(2) + 'KB',
                //             type: file.type,
                //             lastModified: new Date(file.lastModified).toLocaleString()
                //         });
                //         return true; // 返回 true 继续上传
                //     },
                //     valueResolve({ form }) {
                //         console.log(form, '4444');
                //         if (form.face_furtear) {
                //             form.face_furtear = form.face_furtear[0].response.data;
                //         }
                //     }
                // },

            },
        },
    };
};
